import { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { SetSearchTypeId } from "@/store/modules/searchArticle";
import SearchPageTopTabLess from "./SearchPageTopTab.module.less";

function SearchPageTopTab() {
  const dispatch = useDispatch();
  const SearchTypeId = useSelector(
    (state: any) => state.searchArticle.SearchTypeId
  );
  const TopTabLisy = [
    {
      id: 1,
      Name: "文章",
    },
    {
      id: 2,
      Name: "课程",
    },
    {
      id: 3,
      Name: "标签",
    },
    {
      id: 4,
      Name: "用户",
    },
  ];
  return (
    <>
      <div className={SearchPageTopTabLess.searchPageTopTab_content}>
        {TopTabLisy.map((item) => {
          return (
            <div
              className={[
                SearchTypeId === item.id ? "tab_items_active" : "",
                "tab_items",
              ].join(" ")}
              key={item.id}
              onClick={() => dispatch(SetSearchTypeId(item.id))}
            >
              {item.Name}
            </div>
          );
        })}
      </div>
    </>
  );
}

export default SearchPageTopTab;
